<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('文件新增')"/>
</head>
<body>
<form action="javascript:void(0);" class="layui-form">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-upload">
                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label">碳块工作记录编号</label>
                    <div class="layui-input-block">
                        <input class="layui-input" lay-verify="title" id="blockId" name="blockId" th:value="${blockId}"
                               type="text">
                    </div>
                </div>
                <button class="layui-btn layui-btn-normal" id="testList" type="button">选择多文件</button>
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>图片</th>
                            <th>异常类型</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="demoList"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button class="pear-btn pear-btn-primary pear-btn-sm" id="testListAction" lay-filter="block-update"
                    type="submit">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button class="pear-btn pear-btn-sm" type="reset">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<th:block th:include="include :: footer"/>
<script>
    layui.use(['form', 'jquery', 'upload', 'layer'], function () {
        let upload = layui.upload;
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;
        let layerIndex;
        let defects = [];
        let content = [];
        let blockDto = {}

        //获取异常类型字典
        $.ajax({
            url: '/system/dictData/selectByCode?typeCode=config_defect_type',
            type: 'get',
            dataType: 'json',
            success: function (result) {
                if (result.success) {
                    defects = result.data;
                }
            }
        })

        let demoListView = $('#demoList')
            , uploadListIns = upload.render({
            elem: '#testList'
            , url: '/system/file/upload' //改成您自己的上传接口
            , method: 'post'
            , data: {defect: "中心距"} //可选项。额外的参数，如：{id: 123, abc: 'xxx'}
            , accept: 'images' //允许上传时校验的文件类型 图片
            // , acceptMime: 'image/*' //限制只能上传图片
            , number: 10 //限制上传数量
            , multiple: true
            , auto: false //是否默认上传
            // , size: 500 //限制文件大小
            , drag: true //拖拽
            , bindAction: '#testListAction'
            , choose: function (obj) {
                //将每次选择的文件追加到文件队列
                let files = this.files = obj.pushFile();
                obj.preview(function (index, file, result) {
                    console.log(index) //文件索引
                    console.log(file) //文件对象
                    console.log(result) //文件base64 图像
                    let tr = $(['<tr id="upload-' + index + '">'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                        , '<td>'
                        , '<img src="' + result + '">'
                        , '</td>'
                        , '<td>'
                        , '<div class="layui-table-cell">'
                        , '<select class="layui-form-select" name="' + index + '" style="display: inline">'
                        , '<option text="碳块掉块" value="drop">碳块掉块</option>'
                        , '<option text="尺寸超标" value="size">尺寸超标</option>'
                        , '<option text="碳块裂纹" value="crack">碳块裂纹</option>'
                        , '<option text="中心距超标" value="center">中心距超标</option>'
                        , '</select>'
                        , '<div>'
                        , '</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));
                    //文件重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
                    });
                    //文件删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index];
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });
                    demoListView.append(tr);
                });
            }
            , done: function (res, index, upload) { //每个文件提交一次回调一次
                if (res.success) {
                    console.log(res);
                    let contentObj = {};
                    let fileId = res.data; //回调的文件id
                    let tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(4).html('&nbsp;<button class="layui-btn layui-btn-xs">完成</button>'); //清空操作
                    let select = demoListView.find('#upload-' + index + ' option:selected');
                    let defectType = select.val(); //选中的异常类型
                    contentObj.id = fileId;
                    contentObj.defectType = defectType;
                    content.push(contentObj);
                    return delete this.files[index]; //上传成功的文件，在列表中移除
                }
                this.error(index, upload);
            }
            , error: function (index) {
                let tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).find('.demo-reload').removeClass('layui-hide');
            }
            , allDone: function () {

                let blockId = $('#blockId').val();
                blockDto.id = blockId
                blockDto.content = JSON.stringify(content)
                updateContent(blockDto)
                layer.close(layerIndex);
                layer.msg("上传完成", {icon: 1, time: 1200}, function () {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                    parent.layui.table.reload("file-table");
                })
            },
            before: function () { //before
                layerIndex = layer.load();
            }
        });

        function updateContent(data) {
            $.ajax({
                url: '/work/block/updateContent',
                data: JSON.stringify(blockDto),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {

                    if (result.success) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                            parent.layui.table.reload("block-table");
                        });
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000});
                    }
                }
            })
        }

    })
</script>
<script>
</script>
</body>
</html>